import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "TsxDemo",
  props: {
    title: {
      type: String,
      required: true,
      default: "gonglv"
    },
    desc: {
      type: String,
      required: true,
      default: "gonglv"
    }
  },
  render(ctx) {
    return (
      <div class="w-[800px] h-[600px] border overflow-auto bg-[#000000]">
        <svg width="1600" height="1600" xmlns="http://wwww.w3.org/2000/svg">
          <title>{ctx.title}</title>
          <desc>{ctx.desc}</desc>
          <defs>
            <g id="kuang" style="fill: none; stroke-width: 1">
              <rect x="0" y="0" width="660" height="300" />
              <line x1="0" y1="10" x2="660" y2="10" />
            </g>
            <g id="title">
              <line
                x1="0"
                y1="0"
                x2="480"
                y2="0"
                stroke-linecap="round"
                stroke-width="6"
                stroke="blue"
              />
            </g>
            <g id="line1">
              <line x1="0" y1="0" x2="0" y2="200" stroke="blue" />
            </g>
            <g id="g1">
              <polyline points="0 0,5 5,5 25,0 30" style="stroke:blue;" />
              <polyline points="0 0,-5 5,-5 25,0 30" style="stroke:blue;" />
            </g>
            <g id="g2">
              <polyline
                points="0 0,5 5,5 25,0 30"
                style="stroke:blue; fill:#000;"
              />
              <polyline
                points="0 0,-5 5,-5 25,0 30"
                style="stroke:blue; fill:#000;"
              />
            </g>
            <g id="sy">
              <path
                d="M0 0 H-20 V10 M-15 10 L-25 10 M-28 10 L-20 20 L-20 35 M-12 35 L-28 35 M-14 39 L-26 39 M-16 43 L-24 43"
                stroke="blue"
              ></path>
              {ctx.setText("-25", "-14", "SY", "#ff0000", "14px")}
            </g>
            <g id="yuan">
              <circle
                cx="20"
                cy="20"
                r="20"
                style="stroke:blue; fill:none"
              ></circle>
            </g>
          </defs>
          <g>
            <use class="hh" xlink:href="#kuang" x="20" y="20" />
            {ctx.setText("30", "40", "光纤", "#ff0000", "16px")}
            {ctx.setTitle("279", "50", "SK畅1201")}

            <g>
              <use class="hh" xlink:href="#title" x="80" y="75" />
              <use xlink:href="#line1" x="80" y="75" />
              <use xlink:href="#g1" x="80" y="140" class="hove-guan" />
              <use xlink:href="#sy" x="80" y="230" />
              <use xlink:href="#yuan" x="95" y="90" />
              {ctx.setText("110", "150", "01", "#fff", "24px")}
              {ctx.setText("110", "180", "80.0", "#0f0", "24px")}
            </g>
            <g>
              <use xlink:href="#line1" x="200" y="75" />
              <use xlink:href="#g2" x="200" y="140" />
              <use xlink:href="#sy" x="200" y="230" />
              <use xlink:href="#yuan" x="215" y="90" />
              {ctx.setText("230", "150", "01", "#fff", "24px")}
              {ctx.setText("230", "180", "80.0", "#0f0", "24px")}
            </g>
            <g>
              <use xlink:href="#line1" x="320" y="75" />
              <use xlink:href="#g2" x="320" y="140" />
              <use xlink:href="#sy" x="320" y="230" />
              <use xlink:href="#yuan" x="335" y="90" />
              {ctx.setText("350", "150", "01", "#fff", "24px")}
              {ctx.setText("350", "180", "80.0", "#0f0", "24px")}
            </g>
            <g>
              <use xlink:href="#line1" x="440" y="75" />
              <use xlink:href="#g2" x="440" y="140" />
              <use xlink:href="#sy" x="440" y="230" />
              <use xlink:href="#yuan" x="455" y="90" />
              {ctx.setText("470", "150", "01", "#fff", "24px")}
              {ctx.setText("470", "180", "80.0", "#0f0", "24px")}
            </g>
            <g>
              <use xlink:href="#line1" x="560" y="75" />
              <use xlink:href="#g1" x="560" y="140" />
              <use xlink:href="#sy" x="560" y="230" />
              <use xlink:href="#yuan" x="575" y="90" />
              {ctx.setText("590", "150", "01", "#fff", "24px")}
              {ctx.setText("590", "180", "80.0", "#0f0", "24px")}
            </g>
          </g>
        </svg>
      </div>
    );
  },
  setup(props) {
    const title = ref(props.title);
    const desc = ref(props.desc);
    // 文字
    const setText = (x, y, text, color, size) => {
      return (
        <text
          x={x}
          y={y}
          dominant-baseline="hanging"
          fill={color}
          font-size={size}
        >
          {text}
        </text>
      );
    };
    // 横线上标题
    const setTitle = (x, y, text) => {
      return (
        <text
          class="hove-text"
          x={x}
          y={y}
          dominant-baseline="hanging"
          style="font-size: 18px;"
        >
          {text}
        </text>
      );
    };
    return {
      title,
      setTitle,
      desc,
      setText
    };
  }
});
